<template>
<div>
    <el-form ref="dinamicform" :model="value" :disabled="disabled" :inline="inline" :label-width="labelWidth">
      <template v-if="items&&items.length>0" v-for="(item,index) in items">
        <el-form-item :prop="item.id" :rules="filter_rules(item.validator ? item.validator : {spChar:true,length:[-1,50]})" :label="isDinamic == true ? item.label : _$Z[item.label]" :key="index" v-if="item.elType==='input'">
          <el-input :type="item.id" v-model="value[item.id]" :style="item.style?item.style:{'margin-right':'2%'}" :disabled="item.disabled" :rules="filter_rules(item.validator)" >
          </el-input>
        </el-form-item>
        <el-form-item :label="isDinamic == true ? item.label : _$Z[item.label]"  :key="index" v-if="item.elType==='node'">
          <custom-node-new v-model="value[item.id]" :supportType="item.supportType"></custom-node-new>
        </el-form-item>
        <el-form-item :prop="item.id" :rules="filter_rules(item.validator)" :label="isDinamic == true ? item.label : _$Z[item.label]"  :key="index" v-if="item.elType==='orgCombox'">
          <org-combox :type="item.id" v-model="value[item.id]" :disabled="value[item.disabled]" ></org-combox>
        </el-form-item>
        <el-form-item :prop="item.id" :rules="filter_rules(item.validator ? item.validator : {spChar:true,length:[-1,100]})"  :label="isDinamic == true ? item.label : _$Z[item.label]" :key="index" v-if="item.elType==='textarea'">
          <el-input type="textarea" v-model="value[item.id]" style="margin-right:2%" >
          </el-input>
        </el-form-item>
        <el-form-item :prop="item.id" :rules="filter_rules(item.validator)" :label="isDinamic == true ? item.label : _$Z[item.label]" :key="index" v-if="item.elType==='select'">
          <custom-combox v-model="value[item.id]"
                         :code-type="item.codeType"
                         :is-all="item.isAll" :type="item.id"
                         :selectStyle="item.style?item.style:{width: '100%'}">
          </custom-combox>
        </el-form-item>
        <el-form-item :prop="item.id" :rules="filter_rules(item.validator)"  :label="isDinamic == true ? item.label : _$Z[item.label]" :key="index" v-if="item.elType==='defSelect'">
          <def-combox v-model="value[item.id]" 
                      :is-all="item.isAll" 
                      :url="item.url" :type="item.id"
                      :selectStyle="item.style?item.style:{width: '100%'}">
          </def-combox>
        </el-form-item>
        <el-form-item :prop="item.id" :rules="filter_rules(item.validator)" :label="isDinamic == true ? item.label : _$Z[item.label]" :key="index" v-if="item.elType==='multiSelect'">
          <multiple-combox  :type="item.id" v-model="value[item.id]"
                            :code-type="item.codeType"
                            :is-all="item.isAll">
          </multiple-combox>
        </el-form-item>
        <el-form-item :label="isDinamic == true ? item.label : _$Z[item.label]" :key="index" v-if="item.elType==='switch'">
          <el-switch v-model="value[item.id]"></el-switch>
        </el-form-item>
      </template>
    </el-form>
</div>
</template>

<script>
import CustomCombox from '@/views/platform/components/selector/customCombox'
import defCombox from '@/views/platform/components/selector/defCombox'
import multipleCombox from '@/views/platform/components/selector/multipleCombox'
import customNodeNew from '@/views/platform/components/common/customNodeNew'
import orgCombox from '@/views/platform/components/common/orgCombox'
export default {
  name: 'dinamicForm',
  data() {
    return {
      i18Keys: [],
      value: {},
      form: {}
    }
  },
  components: { CustomCombox, defCombox, multipleCombox, customNodeNew, orgCombox },
  props: {
    items: {
      type: Array,
      required: true
    },
    defaultValue: {
      type: Object
    },
    disabled: {
      type: Boolean,
      default: false
    },
    isDinamic: {
      type: Boolean,
      default: false
    },
    inline: {
      type: Boolean,
      default: false
    },
    labelWidth: {
      type: String,
      default: ''
    }
  },
  created() {
    if (!this.isDinamic) {
      this.items.forEach(element => {
        this.i18Keys.push(element.label)
      })
    }
  },
  methods: {
    setDefaultValue() {
      const queryParamTmp = {}
      if (this.defaultValue) {
        this.items.forEach(element => {
          if (!this.defaultValue[element.id]) {
            return true
          }
          queryParamTmp[element.id] = this.defaultValue[element.id] ? this.defaultValue[element.id] : ''
        })
        this.value = queryParamTmp
      }
    },
    // 表单校验
    checkForm(callback) {
      this.$refs.dinamicform.validate((valid) => {
        if (valid) {
          callback()
        }
      })
    },
    // 移除表单校验
    clearValidate() {
      this.$refs.dinamicform.clearValidate()
    },
    // 获取表单值
    getFormItemValue(id) {
      return this.value[id]
    }
  },
  watch: {
    // 实时监测组件中对象的默认值，并更新
    defaultValue: {
      handler: function() {
        this.setDefaultValue()
      },
      deep: true
    },
    items(value) {
      if (!this.isDinamic) {
        this.items.forEach(element => {
          this.i18Keys.push(element.label)
        })
      }
    },
    value: {
      handler: function() {
        this.$emit('data', this.value)
      },
      deep: true
    }
  }
}
</script>
